<template>
  <div id="app">
    <zhu-popover
      v-model="visible1"
      width="200px"
      title="标题"
      content="内容"
      trigger="click"
      placement="bottom"
    >
      <template slot="reference">
        <zhu-button type="primary">点我显示</zhu-button>
      </template>
    </zhu-popover>

    <!-- <zhu-popover
      v-model="visible2"
      width="200px"
      title="标题"
      content="内容"
      trigger="click"
      placement="left"
    >
      <template slot="reference">
        <zhu-button type="primary">点我显示</zhu-button>
      </template>
    </zhu-popover>

    <zhu-popover
      v-model="visible3"
      width="200px"
      title="标题"
      content="内容"
      trigger="click"
      placement="top"
    >
      <template slot="reference">
        <zhu-button type="primary">点我显示</zhu-button>
      </template>
    </zhu-popover> -->
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      visible1: false,
      visible2: true,
      visible3: true
    }
  },
  methods: {}
}
</script>

<style lang="scss">
#app {
  padding: 100px;
}
</style>
